﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>角色管理</title>
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
    <style>
        .layui-table-cell {
            height: auto;
            white-space: normal;
        }

        .action-buttons button {
            margin: 0 3px;
        }
    </style>
</head>

<body>
    <div class="layui-input-inline" style="padding: 20px;">
        <div class="layui-input-inline">
            <label class="layui-input-inline">供应商名称</label>
            <div class="layui-input-inline">
                <input type="text" id="supplierName" placeholder="请输入" class="layui-input" style="width: 150px;">
            </div>
        </div>
        <div class="layui-input-inline">
            <label class="layui-input-inline">业务联系人</label>
            <div class="layui-input-inline">
                <input type="text" id="financial" placeholder="请输入" class="layui-input" style="width: 150px;">
            </div>
        </div>
        <div class="layui-input-inline">
            <label class="layui-input-inline">供应料品</label>
            <div class="layui-input-inline">
                <select name="suppliedid" lay-filter="aihao" id="suppliedid" class="layui-input" style="width: 150px;">
                    <option value="0">--请选择部门--</option>
                </select>
            </div>
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-bg-purple" id="queryButton">查询</button>
        </div>
        <!-- 添加添加按钮 -->
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-bg-blue" id="addButton">添加</button>
        </div>
    </div>
    <table class="layui-hide" id="role-table"></table>
    <div id="demo-laypage-all"></div>
    <!-- 依赖库 -->
    <!-- 修改后（使用绝对路径测试） -->
    <script type="text/javascript" src="/lib/area.js"></script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'jquery', 'layer', 'form', 'laypage'], function () {
            var laypageIns;
            var laypage = layui.laypage;
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;

            ////////////////////////////////////////////////// 初始化表格
            table.render({
                elem: '#role-table',
                id: 'roleTable',
                toolbar: '#toolbarDemo',
                height: 'full-100px',
                cols: [[
                    { field: 'supid', title: '序号', width: 80, sort: true,  },
                    { field: 'supplierName', title: '供应商名称', width: 120 },
                    { field: 'supption', title: '简称', width: 100 },
                    { field: 'suppAddress', title: '公司地址', width: 180, sort: true },
                    { field: 'sAddress', title: '电话', width: 180, sort: true },
                    { field: 'financial', title: '业务联系人', width: 180, sort: true },
                    { field: 'financialPhone', title: '手机号', width: 180, sort: true },
                    { field: 'suppliedName', title: '供应料品', width: 180, sort: true },
                    { field: 'status', title: '状态', width: 100, sort: true },
                    {
                        title: '操作',
                        width: 150,
                     
                        align: 'center',
                        toolbar: '#actionBar'
                    }
                ]],
            });

            var actionBar = '<div class="action-buttons">' +
                '<button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</button>' +
                '<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>' +
                '</div>';

            function loadAddress(array, lables, notId) {
                var s = '<option value="">请选择</option>';
                if (array) {
                    for (var i = 0; i < array.length; i++) {
                        var obj = array[i];
                        s += '<option value="' + obj.address + '" lay-id="' + obj.code + '">' + obj.address + '</option>';
                    }
                }
                $(notId).empty();
                $(lables).html(s);
                form.render("select");
            }

            // 省级选择，获取市
            form.on('select(province)', function (data) {
                var array = layArea.getCityList(data.value);
                loadAddress(array, "#city", "#city,#area")
            });

            // 市级选择，获取地区/县
            form.on('select(city)', function (data) {
                var name1 = $("#province").val();
                var array = layArea.getAreaList(name1, data.value);
                loadAddress(array, "#area", "#area")
            });

            // 加载省份
            loadAddress(layArea.array, "#province", "#city,#area");

            form.on('submit(saveCustomer)', function (data) {
                // 这里可以通过AJAX将数据发送到后台
                layer.msg('提交成功');
                return false;
            });

            function loadDepartments() {
                $.ajax({
                    url: "http://localhost:7174/api/MateSuppli/GetSupplieditems",
                    type: "GET",
                    success: function (res) {
                        if (res.code === 210) {
                            const options = res.data.map(item =>
                                `<option value="${item.suppliedid}">${item.suppliedName}</option>`
                            ).join('');
                            $('#suppliedid').html(`<option value="0">--请选择部门--</option>${options}`);
                            form.render('select');
                        }
                    }
                });
            }
            $(loadDepartments);

            function loadRoleData(page, limit) {
                var supplierName = $("#supplierName").val();
                var financial = $("#financial").val();
                var suppliedid = $("#suppliedid").val();
                layer.load(2);

                $.ajax({
                    url: 'http://localhost:7174/api/MateSuppli/GetpaginationMaate',
                    url: "@ViewBag.BaseUrl/T7/MateSuppli/GetpaginationMaate",
                    type: 'get',
                    headers: {
                        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VyTmFtZSI6IlpDIiwiVXNlcklkIjoiMSIsImV4cCI6MTc0MzA0NTAwOSwiaXNzIjoiZ3JvdXBUd28iLCJhdWQiOiJncm91cFR3byJ9.o5KYnBxK-O0VAF14_yv1hTRDUIiNNY023m0Cy2VkTgE',
                        'Accept': 'application/json'
                    },
                    data: {
                        SupplierName: supplierName,
                        Financial: financial,
                        Suppliedid: suppliedid,
                        PageIndex: page,
                        PageSize: limit
                    },
                    dataType: 'json',
                    success: function (res) {
                        layer.closeAll('loading');
                        if (res.code === 210) {
                            table.reload('roleTable', {
                                data: res.data.list,
                                done: function (res, curr, count) {
                                    $('.action-cell').html(actionBar);
                                }
                            });

                            laypageIns = laypage.render({
                                elem: 'demo-laypage-all',
                                count: res.data.totalCount,
                                limit: limit,
                                curr: page,
                                limits: [2, 10, 20],
                                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                                jump: function (obj, first) {
                                    if (!first) {
                                        loadRoleData(obj.curr, obj.limit);
                                    }
                                }
                            });
                        } else {
                            layer.msg('获取数据失败: ' + (res.message || '未知错误'), { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.closeAll('loading');
                        layer.msg('请求失败: ' + error, { icon: 2 });
                    }
                });
            }

            loadRoleData(1, 10);

            $('#queryButton').on('click', function () {
                const currentLimit = laypageIns ? laypageIns.limit : 10;
                loadRoleData(1, currentLimit);
            });

            // 添加按钮点击事件
            $('#addButton').on('click', function () {
                layer.open({
                    title: '添加供应商',
                    type: 1,
                    content: `
                    <div class="layui-form layui-form-pane" style="padding: 20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="supplierName" placeholder="请输入供应商名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商别名</label>
                            <div class="layui-input-block">
                                <input type="text" name="supplierAlias" placeholder="请输入供应商别名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">简称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="supption" placeholder="请输入简称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label" title="所属省/市/区">所属省/市/区</label>
                                <div class="layui-input-block">
                                    <div class="layui-input-inline" style="width: 30%;">
                                        <select name="province" id="province" lay-filter="province" lay-search=""></select>
                                    </div>
                                    <div class="layui-input-inline" style="width: 30%;">
                                        <select name="city" id="city" lay-filter="city" lay-search=""></select>
                                    </div>
                                    <div class="layui-input-inline" style="width: 30%;">
                                        <select name="county" id="area" lay-filter="area" lay-search=""></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">供应料品</label>
                            <div class="layui-input-block">
                                <select name="suppliedid" class="layui-select">
                                    <option value="0">--请选择部门--</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">供应商分类</label>
                                <div class="layui-input-block">
                                    <select name="supplierCid" class="layui-select">
                                        <option value="0">--请选择部门--</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">供应商等级</label>
                                <div class="layui-input-block">
                                    <select name="supplierG" class="layui-select">
                                        <option value="0">--请选择部门--</option>
                                        <option value="A级">A级</option>
                                        <option value="B级">B级</option>
                                        <option value="c级">c级</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">公司地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="suppAddress" placeholder="请输入公司地址" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">邮编</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="postalCode" placeholder="请输入邮编" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">电话</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="telephone" placeholder="请输入电话" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="remark" placeholder="请输入备注" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">

                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="status" value="正常" title="正常" checked>
                                    <input type="radio" name="status" value="停止" title="停止">
                                </div>

                            </div>
                        </div>
                        <div class="layui-tab layui-tab-brief" lay-filter="supplierTab">
                            <ul class="layui-tab-title">
                                <li class="layui-this">开票信息</li>
                                <li>业务联系人</li>
                                <li>财务联系人</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">开户行</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="sBank" placeholder="请输入开户行" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">地址电话</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="sAddress" placeholder="请输入地址电话" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">账号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="sAddAccount" placeholder="请输入账号" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">税号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="taxNumber" placeholder="请输入税号" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">业务联系人姓名</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="bines" placeholder="请输入业务联系人姓名" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">业务联系电话</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="binesPhone" placeholder="请输入业务联系电话" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">财务联系人姓名</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="financial" placeholder="请输入财务联系人姓名" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">财务联系电话</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="financialPhone" placeholder="请输入财务联系电话" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                    `,
                    area: ['800px', '800px'],
                    success: function (layero, index) {
                        form.render();

                        // 加载供应料品下拉选项
                        $.ajax({
                            //url: "http://localhost:7174/api/MateSuppli/GetSupplieditems",
                            url: "@ViewBag.BaseUrl/T7/MateSuppli/GetSupplieditems",
                            type: "GET",
                            success: function (res) {
                                if (res.code === 210) {
                                    var optionHtml = '<option value="0">--请选择部门--</option>';
                                    res.data.forEach(item => {
                                        optionHtml += `<option value="${item.suppliedid}">${item.suppliedName}</option>`;
                                    });
                                    $('[name=suppliedid]', layero).html(optionHtml);
                                    form.render('select');
                                }
                            }
                        });

                        // 加载供应商分类下拉选项
                        $.ajax({
                            //url: "http://localhost:5234/api/MateSuppli/Getprovendor",
                            url: "@ViewBag.BaseUrl/T7/MateSuppli/Getprovendor",
                            type: "GET",
                            success: function (res) {
                                if (res.code === 210) {
                                    var optionHtml = '<option value="0">--请选择部门--</option>';
                                    res.data.forEach(item => {
                                        optionHtml += `<option value="${item.supplierCid}">${item.supplierCName}</option>`;
                                    });
                                    $('[name=supplierCid]', layero).html(optionHtml);
                                    form.render('select');
                                }
                            }
                        });

                        // 加载省份
                        loadAddress(layArea.array, "#province", "#city,#area");

                        // 表单提交处理
                        form.on('submit(formSubmit)', function(data){
                            // 收集所有表单数据
                           var formData = data.field;

                            // 打印表单数据到控制台
                            console.log("收集到的表单数据:", formData);

                            // 显示收集到的数据
                            var msg = '<div style="max-height:400px;overflow-y:auto;"><table class="layui-table">';
                            msg += '<colgroup><col width="150"><col></colgroup><thead><tr><th>字段名</th><th>值</th></tr></thead><tbody>';

                            for(var key in formData) {
                                msg += '<tr><td>' + key + '</td><td>' + (formData[key] || '空') + '</td></tr>';
                            }

                            msg += '</tbody></table></div>';

                            layer.open({
                                title: '收集到的表单数据',
                                content: msg,
                                area: ['600px', '500px'],
                                btn: ['确定'],
                                yes: function(index, layero){
                                    layer.close(index);
                                    // 这里可以添加实际的提交逻辑
                                    // submitFormData(formData);
                                }
                            });
                                // 直接提交，不再显示确认弹窗
        submitFormData(formData);

                            return false; // 阻止表单跳转
                        });
                    }
                });
            });

            // 实际的表单提交函数
            function submitFormData(formData) {
                layer.load(2);
                $.ajax({
                    //url: 'http://localhost:5090/api/MAddSuppli/AddSuppli',
                    url: "@ViewBag.BaseUrl/T8/MAddSuppli/AddSuppli",
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function(res) {
                        layer.closeAll('loading');
                        if(res.code === 212) {
                            layer.msg('添加成功', {icon: 1});
                            loadRoleData(1, 10); // 刷新表格
                        } else {
                            layer.msg(res.message || '添加失败', {icon: 2});
                        }
                    },
                    error: function(xhr, status, error) {
                        layer.closeAll('loading');
                        layer.msg('请求失败: ' + error, {icon: 2});
                    }
                });
            }
        });
    </script>

    <script type="text/html" id="actionBar">
        <div class="action-buttons">
            <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</button>
            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
        </div>
    </script>
</body>

</html>